<template>
  <div id="app">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <keep-alive v-if="!this.$route.meta.keepAlive">
      <router-view />
    </keep-alive>
    <router-view v-else />
    <van-tabbar v-model="active">
      <van-tabbar-item
        icon="home-o"
        to="/home"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="friends-o"
        to="/friends"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="cart-o"
        to="cart"
      ></van-tabbar-item>
      <van-tabbar-item
        icon="search"
        to="search"
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: 'app',
  components: {
  },
  data() {
    return {
      title: 'Home',
      active: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    }
  },
  watch: {
    '$route.meta'(meta) {
      this.title = meta.title
    }
  },
  created() {
    console.log(this.$route.meta)
  }
}
</script>
<style lang="scss">
#app {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
